<template>
  <div class="cart_item">
    <div class="cart_column column_1">
      <el-checkbox class="my_el_checkbox" v-model="course.selected"></el-checkbox>
    </div>
    <div class="cart_column column_2">
      <img :src="$settings.Host + course.course_img" alt="">
      <span><router-link :to="`/course/this.course.course_id`">{{course.course_name}}</router-link></span>
    </div>
    <div class="cart_column column_3">
      <el-select v-model="course.expire_time" size="mini" placeholder="请选择购买有效期" class="my_el_select">
        <el-option v-for="item in course.expire_list" :key="item.expire" :label="item.text"
                   :value="item.expire"></el-option>

      </el-select>
    </div>
    <div class="cart_column column_4">¥{{course.price.toFixed(2)}}</div>
    <div class="cart_column column_4 column_5 cart_del" @click="deleteHandle">删除</div>
  </div>
</template>

<script>
  export default {
    name: "CartItem",
    data() {
      return {
        checked: false,
        expire: "1个月有效",
      }
    },
    props: ["course", 'token', 'course_key'],
    watch: {
      "course.selected"() {
        this.change_selected();
      },
      "course.expire_time": function () {
        this.change_expire();
      }
    },
    methods: {
      deleteHandle() {
        this.$axios.delete(`${this.$settings.Host}/cart/`, {
          params: {
            course_id: this.course.course_id
          },

          headers: {
            Authorization: "jwt " + this.token,
          }
        }).then(response => {
          this.$message.success('删除商品成功！');
          this.$emit("del_cart", this.course_key)
        }).catch(error => {
          this.$message.error('删除商品失败！')
        })
      },
      change_selected() {
        this.$axios.put(`${this.$settings.Host}/cart/`, {
          course_id: this.course.course_id,
          selected: this.course.selected,
        }, {
          headers: {
            Authorization: "jwt " + this.token,
          }
        }).then(response => {
          this.$message.success('切换勾选状态成功！')
          this.$emit("calc_total")
        }).catch(error => {
          this.$message.error('切换勾选状态失败！')
        })
      },
      change_expire() {
        // 切换课程有效期

        for (let item of this.course.expire_list) {
          if (item.expire === this.course.expire_time) {
            this.course.price = item.price;
            this.$axios.patch(`${this.$settings.Host}/cart/`, {
              course_id: this.course.course_id,
              expire: this.course.expire_time,
            }, {
              headers: {
                Authorization: 'jwt ' + this.token,
              }
            }).then(response => {
              this.$message.success("有效期切换成功")

              this.$emit("calc_total")
            }).catch(error => {
              this.$message.error("有效期切换失败")
            })
          }
        }
      }
    }
  }
</script>

<style scoped>
  .cart_item::after {
    content: "";
    display: block;
    clear: both;
  }

  .cart_column {
    float: left;
    height: 250px;
  }

  .cart_item .column_1 {
    width: 88px;
    position: relative;
  }

  .cart_del {
    cursor: pointer;
  }

  .my_el_checkbox {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: 16px;
    height: 16px;
  }

  .cart_item .column_2 {
    padding: 67px 10px;
    width: 520px;
    height: 116px;
  }

  .cart_item .column_2 img {
    width: 175px;
    height: 115px;
    margin-right: 35px;
    vertical-align: middle;
  }

  .cart_item .column_3 {
    width: 197px;
    position: relative;
    padding-left: 10px;
  }

  .my_el_select {
    width: 117px;
    height: 28px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  .cart_item .column_4 {
    padding: 67px 10px;
    height: 116px;
    width: 142px;
    line-height: 116px;
  }

  .cart_item .column_5 {
    color: #ffc210;
  }
</style>
